<template>
  <div class="example-container">
    <h2>MassContentEditor 使用示例</h2>

    <!-- 基础示例 -->
    <el-card class="example-card">
      <template #header>
        <div class="card-header">
          <span>基础示例</span>
        </div>
      </template>
      
      <MassContentEditor
        v-model="basicContentList"
        :t="t"
        :uploadHandler="handleUpload"
      />

      <div class="result-display">
        <h4>当前内容：</h4>
        <pre>{{ JSON.stringify(basicContentList, null, 2) }}</pre>
      </div>
    </el-card>

    <!-- 带内容预览的示例 -->
    <el-card class="example-card">
      <template #header>
        <div class="card-header">
          <span>带内容预览的示例</span>
        </div>
      </template>
      
      <MassContentEditor
        v-model="previewContentList"
        :t="t"
        :uploadHandler="handleUpload"
        :showMessageDisplay="true"
      >
        <template #content-preview="{ item }">
          <div class="custom-preview">
            <strong>{{ item.messageType }}:</strong>
            <span>{{ item.messageContent }}</span>
            <span v-if="item.messageContentUrl">({{ item.messageContentUrl }})</span>
          </div>
        </template>
      </MassContentEditor>

      <div class="result-display">
        <h4>当前内容：</h4>
        <pre>{{ JSON.stringify(previewContentList, null, 2) }}</pre>
      </div>
    </el-card>

    <!-- 自定义按钮示例 -->
    <el-card class="example-card">
      <template #header>
        <div class="card-header">
          <span>自定义按钮配置</span>
        </div>
      </template>
      
      <MassContentEditor
        v-model="customButtonContentList"
        :buttons="customButtons"
        :t="t"
        :uploadHandler="handleUpload"
      />

      <div class="result-display">
        <h4>当前内容：</h4>
        <pre>{{ JSON.stringify(customButtonContentList, null, 2) }}</pre>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MassContentEditor from './MassContentEditor.vue';
import {
  MassSendTaskContentType,
  type ContentItem,
  type ButtonInfo,
} from './types';

// 翻译函数示例
const t = (key: string) => {
  const translations: Record<string, string> = {
    'mass.addText': '添加文本',
    'mass.addImage': '添加图片',
    'mass.voiceCall': '语音通话',
    'mass.videoCall': '视频通话',
    'common.type': '类型',
    'common.content': '内容',
    'common.handle': '操作',
    'common.delete': '删除',
    'mass.moveUp': '上移',
    'mass.moveDown': '下移',
    'session.enterContent': '请输入内容',
  };
  return translations[key] || key;
};

// 基础示例
const basicContentList = ref<ContentItem[]>([]);

// 带预览的示例
const previewContentList = ref<ContentItem[]>([]);

// 自定义按钮示例
const customButtonContentList = ref<ContentItem[]>([]);

// 自定义按钮配置（只显示文本和图片）
const customButtons: ButtonInfo[] = [
  {
    btnName: 'mass.addText',
    icon: 'Document',
    massSendTaskContentType: MassSendTaskContentType.MassSendTaskContentTypeText,
  },
  {
    btnName: 'mass.addImage',
    icon: 'Picture',
    massSendTaskContentType: MassSendTaskContentType.MassSendTaskContentTypeImage,
  },
];

// 模拟上传处理函数
const handleUpload = async (file: File): Promise<{ key: string; url: string }> => {
  // 模拟上传延迟
  await new Promise((resolve) => setTimeout(resolve, 1000));
  
  // 模拟返回上传结果
  const key = `uploads/${Date.now()}_${file.name}`;
  const url = `https://cdn.example.com/${key}`;
  
  console.log('上传文件:', file.name);
  console.log('返回结果:', { key, url });
  
  return { key, url };
};
</script>

<style scoped>
.example-container {
  padding: 20px;
}

.example-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.result-display {
  margin-top: 20px;
  padding: 16px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.result-display h4 {
  margin: 0 0 10px 0;
}

.result-display pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 12px;
}

.custom-preview {
  padding: 8px;
  background-color: #f0f9ff;
  border-radius: 4px;
}

.custom-preview strong {
  color: #1890ff;
  margin-right: 8px;
}
</style>
